<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/UserLogin.css">
</head>
<body>
<div id="app">
    <div class="welcome-message">欢迎登录锦江医院预约挂号系统</div>
    <div class="login-links">
        <a href="../doctor/DoctorLogin.html">医生登录</a>
        <!--        <a href="../admin/AdminLogin.html">管理员登录</a>-->
        <a href="http://localhost:5173/login">管理员登录</a>
    </div>
    <login-form></login-form>
</div>


<script src="../../js/vue.js"></script>

<script>
    Vue.component('login-form', {
        data() {
            return {
                username: '',
                password: ''
            };
        },
        methods: {
            login() {
                // 这里可以处理登录逻辑，比如发送请求到服务器进行验证
                console.log('Username:', this.username);
                console.log('Password:', this.password);
            },
            redirectToRegister() {
                // 请确认 UserRegister.html 文件位于相同目录下，或者根据实际情况修改路径
                window.location.href = "UserRegister.html";
            },
            redirectToLogin() {
                window.location.href = "Home.html"
            }

        },
        template: `
          <div class="login-container">
          <h2>医疗预约挂号系统</h2>
          <form>
            <input type="text" v-model="username" placeholder="Username" required>
            <input type="password" v-model="password" placeholder="Password" required>
            <input type="button" value="Login" @click="redirectToLogin">
          </form>
          <input type="button" value="Register" @click="redirectToRegister">
          </div>
        `
    });

    new Vue({
        el: '#app'
    });
</script>
</body>
</html>
